<template>
  <div class="">
    <v-header></v-header>
    <main>
      <!-- banner -->
      <div class="banner" id="banner">
        <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="500" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img :src="$host + item.image_src" alt="" />
      </van-swipe-item>
    </van-swipe>
        <ul class="list" id="banner_list">
          <li class="high" v-for="item in title" :key="item.id">{{ item.title }}</li>
        </ul>
      </div>

      <!-- 同步课程 -->
      <div class="online">
        <div class="title">
          <span class="line"></span>
          <span class="cont">同步课程</span>
          <a href="pages/online.html?type=1"
            ><span class="more"
              >更多课程<i class="iconfont icon-right1"></i> </span
          ></a>
        </div>
        <div class="onlineCont">
          <div class="content">
            <ul id="syncCourse">
              <li v-for="(item, index) in courselist" @click="fn(item.cid)">
                <div class="top">
                  <span class="rj">{{ item.type_name }}</span>
                  <img :src="$host + item.image_src" alt="" class="m" />
                  <p>学科：{{ item.subject_name }}</p>
                </div>
                <div class="bottom">
                  <div class="left">
                    <span>{{ item.title }}</span>
                    <span class="time">地区：{{ item.area_name }}</span>
                  </div>
                  <div class="right">
                    {{ item.price == 0 ? "免费学习" : item.price }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 页面广告 -->
      <div class="contBanner">
        <img src="../assets/img/index/WechatIMG20.png" alt="" />
      </div>

      <!-- 精品课程 -->
      <div class="goodClass">
        <div class="title">
          <span class="line"></span>
          <span class="cont">精品课程</span>
          <a href="pages/online.html?type=2"
            ><span class="more"
              >更多课程<i class="iconfont icon-right1"></i> </span
          ></a>
        </div>
        <div class="onlineCont">
          <div class="content">
            <ul id="syncCourse">
              <li v-for="(item, index) in user"  @click="fn(item.cid)">
                <div class="top">
                  <span class="rj">{{ item.type_name }}</span>
                  <img :src="$host + item.image_src" alt="" class="m" />
                  <p>学科：{{ item.subject_name }}</p>
                </div>
                <div class="bottom">
                  <div class="left">
                    <span>{{ item.title }}</span>
                    <span class="time">地区：{{ item.area_name }}</span>
                  </div>
                  <div class="right">
                    {{ item.price == 0 ? "免费学习" : item.price }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="rightCont">
            <img src="../assets/img/index/good_banner7.png" alt="" />
          </div>
        </div>
      </div>

      <div class="footB">
        <div><img src="../assets/img/index/foot1.png" alt="" /></div>
        <div><img src="../assets/img/index/foot2.png" alt="" /></div>
        <div><img src="../assets/img/index/foot3.png" alt="" /></div>
      </div>

      <div class="fix">
        <div class="lesson">
          <img src="../assets/img/index/mylesson.png" alt="" />
        </div>
        <div class="top">
          <img src="../assets/img/index/gotop.png" alt="" @click="a" />
        </div>
      </div>
    </main>
    <v-footer></v-footer>
  </div>
</template>

<script>
// import Swiper from "swiper"; // 注意引入的是Swiper
// import "swiper/css/swiper.min.css"; // 注意这里的引入
import { getbanners } from "../http/api";
import vFooter from "@/components/vFooter.vue";
export default {
  components: { vFooter },
  name: "",
  data() {
    return {
      courselist: [],
      user: [],
      banners: [],
      title:[]
    };
  },
  methods:{
    fn(cid){
      this.$router.push('/videodetail?cid='+cid)
    },
    a(){
      document.body.timer = setInterval(function () {
            document.documentElement.scrollTop -= 50;
            if (document.documentElement.scrollTop <= 0) {
                clearInterval(document.body.timer);
            }
        }, 1);
    }
  },
  created() {
    this.$axios.get("/v1/courselist?type=1&num=8").then((res) => {
      console.log(res);
      this.courselist = res.data;
    });
    this.$axios.get("/v1/courselist?type=2&num=6").then((a) => {
      console.log(a);
      this.user = a.data;
    });
  },
  async mounted() {
    let a=await getbanners()
    console.log(a);
    this.banners=a.data
   this.title=a.data
  },
};
</script>

<style scoped>
.swiper-container {
  width: 100vw;
  height: 4rem;
}
.swiper-slide {
  text-align: center;
  line-height: 4rem;
  color: #b0b0b0;
}
.swiper-slide img {
  width: 100vw;
}
.swiper-slide1 {
  background: red;
}

.swiper-slide2 {
  background: blue;
}

.swiper-slide3 {
  background: yellow;
}
</style>
